<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Editor</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../dist/taggd.css">
    <link rel="stylesheet" href="./assets/layout.css" />
    <link rel="stylesheet" href="./themes/taggd-classic.css" />
  </head>
  <body>
    <header class="header">
      <ul>
        <li><a href="./basic.html">Basic</a></li>
        <li class="active"><a href="./editor.html">Editor</a></li>
      </ul>
    </header>
    <header class="header">
      <ul>
        <li class=""><label><input type="checkbox" checked id="TaggdEditor"/>Taggd Editor</label></li>
        <li class=""><label><input type="checkbox" checked id="TagEditor"/>Tag Editor</label></li>
      </ul>
      <ul>
        <li class=""><button id="btnGenerateOutput">Get Data</button></li>
        <li class=""><button id="btnTaggdDestroy">Destroy</button></li>
      </ul>
    </header>
    <main class="container">
      <img src="../assets/1024x512.jpg" alt="" id="image" style="width: 100%;" />
    </main>
    <pre id="output"></pre>
    <script src="../../dist/taggd.umd.js"></script>
    <script>
      var image = document.getElementById('image')

      var data = [
        new Taggd.Tag({x: 200, y: 200}).enableEditorMode(),
        new Taggd.Tag({x: 600, y: 300}).enableEditorMode(),
        new Taggd.Tag({x: 300, y: 400}, '蕾姆是最好的女孩',{"class":"btnxlixk"}).enableEditorMode(),
        new Taggd.Tag({x: 400, y: 300}, '蕾姆是最好的女孩').disableEditorMode()
      ]

      var taggd = new Taggd(image,{}, data).enableEditorMode()

      taggd.on('*', function (event) {
        console.log(event)
      })

      taggd.on('taggd.editor.add', function (taggd, position) {
        var tag = new Taggd.Tag(position, `x${position.x}-y${position.y}`).enableEditorMode()
        data.push(tag)
        taggd.addTag(tag)
      })

      btnGenerateOutput.addEventListener('click', function () {
        output.innerHTML = JSON.stringify(taggd.getTags(), null, 2);
      });

      btnTaggdDestroy.addEventListener('click', function () {
        taggd.destroy()
      })

      TaggdEditor.addEventListener('change', function (event) {
        if(event.target.checked) {
          taggd.enableEditorMode()
        } else {
          taggd.disableEditorMode()
        }
      })

      TagEditor.addEventListener('change', function (event) {
        if(event.target.checked) {
          data.forEach(tag => tag.enableEditorMode())
        } else {
          data.forEach(tag => tag.disableEditorMode())
        }
      })
    </script>
  </body>
</html>
